<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编程式路由</title>
</head>
<body>
<div id="app">
    <button @click="goHome">去首页</button>
    <button @click="goList">去列表页</button>
    <router-view></router-view>
</div>
<template id="tem1">
    <div>
        <h2>[首页]</h2>
        <h2>参数：{{this.$route.query.plan}}</h2>
    </div>
</template>
<template id="tem2">
    <div>
        <h2>[列表]</h2>
        <h2>参数：{{this.$route.params.uid}}</h2>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const Home = {
        template: "#tem1"
    }
    const List = {
        template: "#tem2"
    }
    const routes = [{
        path: "/home",
        name: "home",
        component: Home
    }, {
        path: "/list",
        name: "list",
        component: List
    }]
    const router = new VueRouter({
        routes
    })
    new Vue({
        el: "#app",
        router: router,
        methods: {
            goHome: function () {
                /* 带查询参数 home?plan=private */
                this.$router.push({
                    path: 'home',
                    query: {
router.replace(location)
                router.push()
                router.go(n)

plan: "private"
            }
            })
            },
            goList: function () {
                /* 字符串形式 */
                this.$router.push({
                    name: 'list',
                    params: {
                        uid: 1
                    }
                });
            }
        }
    })
</script>